const { useState } = React;

const Button = props => React.createElement(
    "div",
    null,
    React.createElement("button", { style: { background: props.color }, onClick: () => props.callback(props.color) })
);

function App() {
    const [bg, setBg] = useState("skyblue");
    const [partyMode, setPartyMode] = useState("none");

    return React.createElement(
        "div",
        { className: "body",
            style: bg == "skyblue" ? { background: "skyblue" } : { background: bg, animation: partyMode } },
        React.createElement(
            "button",
            { className: "easterEgg", onClick: () => setPartyMode("rotate 500ms linear 20") },
            "Party Mode"
        ),
        React.createElement(
            "button",
            { className: "reset", onClick: () => setBg("skyblue"),
                style: bg === "skyblue" ? { transform: "translateY(0px)" } : { transform: "translateY(60px)" }
            },
            "RESET"
        ),
        React.createElement(
            "div",
            { className: "container", style: { background: bg, animation: partyMode } },
            React.createElement(Button, { color: "red", callback: color => setBg(color) }),
            React.createElement(Button, { color: "green", callback: color => setBg(color) }),
            React.createElement(Button, { color: "gold", callback: color => setBg(color) })
        )
    );
}

ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
